<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="outer">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>
<style type="text/css">
	.outer div{
		float: left;
		height: 100px;
		width: 100px;
		border-radius: 50%;
		background-color: #0000FF;
		animation: ball 2s forwards ease-in;
	}
	.outer{
		height: 500px;
		border-bottom: 10px solid;
		margin: 50px auto;
		/* 开启bfc */
		overflow: hidden;
	}
	/* 创建小球下落动画 */
	@keyframes ball{
		from{
			margin-top: 0;
		}
		20%,60%,to{
			margin-top: 400px;
			animation-timing-function: ease-out;
		}
		40%{
			margin-top: 100px;
		}
		80%{
			margin-top: 200px;
		}
	}
</style>